
/* ++bootstap-tab.js*/

html{
  margin: 20px 10px auto;
  font-family: arial,sans-serif;
} 
.nav:after,
.nav:before {
  content:"";
  display: table;
} 
.nav:after {
  clear:both;
  overflow:hidden;
}
.nav {
  zoom: 1;
  margin-left: 20px;
}
.nav li {
  list-style: none outside none;
  float: left;
  position: relative;/*这个很重要*/
}
.nav .active {
  z-index: 3;/*当前项在最顶端*/
}
.nav li:before,
.nav li:after,
.nav  a:before,
.nav  a:after {
  content:"";
  position: absolute;
  bottom:0;

}
.nav li:before,
.nav li:after {
  background: #BE3569;
  width: 10px;
  height: 10px;
}
.nav li:before {
  left: -10px;
}
.nav li:after {
  right: -10px;
}
.nav a {
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  color: #F66599;
  background: #BE3569;
  border-radius: 10px 10px 0 0;
}
.nav .active a {
  background: #F66599;
  color:#BE3569;
}

.nav  a:before,
.nav  a:after {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #BE3569;
  z-index: 2;/*圆形在矩形上面*/
}
.nav .active a:before,
.nav .active a:after {
  background: #BE3569;
}
.nav  a:before {
  left:-20px; 
}
.nav  a:after {
  right: -20px;
}
/*当前项的:after和:before的z-index值为1*/
.nav .active:before,
.nav .active:after {
  z-index: 1;/*当前项的矩形在圆形下面*/
  background: #F66599;
}
/*第一个选项卡的:before和最后一个选项卡的:after背景色不一样*/
.nav li:first-child a:before,
.nav li:last-child a:after {
  background-color: #fff;
}
.tab-content {
  background: #F66599;
  color:#BE3569;
  padding: 20px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}